<div class="add-to-project middle surface-shaded">
  <div class="middle-content" persist-tab-state>
    <div class="container-fluid">
      <alerts alerts="alerts" class="mar-top-md"></alerts>
      <div class="row">
        <div class="col-md-12">
          <uib-tabset class="mar-top-md" ng-if="project">
            <uib-tab active="selectedTab.fromCatalog">
              <uib-tab-heading>Browse Catalog</uib-tab-heading>
              <catalog
                  project-name="projectName"
                  project-image-streams="projectImageStreams"
                  openshift-image-streams="openshiftImageStreams"
                  project-templates="projectTemplates"
                  openshift-templates="openshiftTemplates">
              </catalog>
            </uib-tab>

            <uib-tab active="selectedTab.deployImage">
              <uib-tab-heading>Deploy Image</uib-tab-heading>
              <form><!-- wrapping form element is necessary for the enter key to trigger the submit button -->
                <deploy-image ng-if="project" project="project"></deploy-image>
              </form>
            </uib-tab>

            <uib-tab active="selectedTab.fromFile">
              <uib-tab-heading>Import YAML / JSON</uib-tab-heading>
              <from-file ng-if="project" project="project"></from-file>
            </uib-tab>

          </uib-tabset>
        </div>
      </div>
    </div>
  </div><!-- /middle-content -->
</div><!-- /middle -->
